<template>
  <contents class="wantBuy-template" :heightInclude="['navBar']">
    <view class="search-warp">
      <u-search
        :placeholder="$t('locales.purchaseSearch')"
        v-model="keywords"
        :show-action="false"
        @search="searchInput"
      />
    </view>
    <mescroll-body
      top="51px"
      ref="mescrollRef"
      @init="mescrollInit"
      @down="downCallback"
      @up="upCallback"
    >
      <GoodsItem v-for="item in goods" :key="item.id" :dataValue="item" />
    </mescroll-body>
  </contents>
</template>
<script>
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'

import GoodsItem from '@/components/wantBuyGoodsList/templateItem.vue'

import { purchaseGoodsList } from '@/api/http/wantBuy'

export default {
  mixins: [MescrollMixin],
  components: {
    GoodsItem
  },
  data() {
    return {
      goods: [],
      keywords: ''
    }
  },
  onLoad() {},

  methods: {
    searchInput() {
      this.mescroll.resetUpScroll()
    },

    upCallback(page) {
      purchaseGoodsList({
        pageNo: page.num,
        pageSize: page.size,
        keyWord: this.keywords
      })
        .then((res) => {
          if (res.code === 200) {
            if (res.data) {
              if (page.num == 1) this.goods = [] //如果是第一页需手动制空列表
              this.goods = this.goods.concat(res.data.records)
              this.mescroll.endSuccess(res.data.records.length)
            } else {
              this.goods = []
              this.mescroll.endSuccess(0)
            }
          } else {
            this.mescroll.endErr()
          }
        })
        .catch(() => {
          this.mescroll.endErr()
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.wantBuy-template {
  .search-warp {
    width: 100%;
    background-color: #fff;
    position: fixed;
    left: 0;
    padding: 15rpx 24rpx 15rpx 24rpx;
    z-index: 9;
  }
}
</style>